<template>
    <div class="mine_parent">
        <!-- 头像部分 -->
        <div class="avatar">
            <!-- 左侧头像 用户 -->
            <div class="username">
                <!-- 头像 -->
                <div class="left">
                    <van-image round width="3rem" height="3rem"
                        src="https://img2.baidu.com/it/u=1745912875,312823039&fm=253&app=138&f=JPEG?w=800&h=800" />
                </div>
                <!-- 文字 -->
                <div class="right" style="margin-left: 10px;">
                    <div style="font-weight: bold;font-size: 14px;font-family:'楷体';">LLL</div>
                    <div>
                        <van-button size="small" style="height:20px;" plain round type="default">Lv8.0</van-button>
                    </div>
                </div>
            </div>
            <!-- 右侧箭头 -->
            <div class="icon">
                <van-icon name="arrow" size="20" />
            </div>
        </div>
        <!-- 完成宫格部分 -->
        <div class="grid" style="margin-top: 20px;">
            <van-grid square :border="false">
                <van-grid-item icon-color="red" v-for="item in gridList" :key="item.id" :icon="item.icon" :text="item.text" />
            </van-grid>
        </div>
        <!-- 我喜欢的音乐 -->
         <div class="music">
            <div class="left" style="display: flex;">
                <!-- 图标 -->
                <div class="icon">
                    <van-icon name="like" color="red" />
                </div>
                <!-- 文字 -->
                <div class="text" style="margin-left: 10px;">
                    <div style="font-weight: bold; margin-bottom: 6px;">我喜欢的音乐</div>
                    <div style="color: #736d6b;font-size: 12px;">666首</div>
                </div>
            </div>
            <div class="right">
                <van-button size="mini" icon="fire" plain round type="default">心动模式</van-button>
            </div>
         </div>
          <div class="card" style="margin-top: 10px;">
            <van-tabs v-model:active="active" animated color="red" background="#f4f4f4">
                <!-- 创建歌单 -->
                <van-tab title='创建歌单' name="a">
                    <div class="tab">
                        <div class="top">
                            <div class="left" style="font-size: 12px;color: #736d6b;">创建歌单（3个）</div>
                            <div class="right">
                                <van-icon name="plus" color="#736d6b" size="18" />
                                <van-icon name="bars" size="18" color="#736d6b" style="margin-left: 5px;" />
                            </div>
                        </div>
                        <div class="bottom" v-for="item in playList_a" :key="item.id">
                            <div class="left">
                                <img width="45px" height="45px" :src="item.url">
                            </div>
                            <div class="right">
                                <div style="font-weight: bold;">{{ item.name }}</div>
                                <div style="font-size: 12px;color: #736d6b;">{{ item.num }}</div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <!-- 收藏歌单 -->
                <van-tab title='收藏歌单' name="b">
                    <div class="tab">
                        <div class="top">
                            <div class="left" style="font-size: 12px;color: #736d6b;">收藏歌单（2个）</div>
                            <div class="right">
                                <van-icon name="plus" color="#736d6b" size="18" />
                                <van-icon name="bars" size="18" color="#736d6b" style="margin-left: 5px;" />
                            </div>
                        </div>
                        <div class="bottom" v-for="item in playList_b" :key="item.id">
                            <div class="left">
                                <img width="45px" height="45px" :src="item.url">
                            </div>
                            <div class="right">
                                <div style="font-weight: bold;">{{ item.name }}</div>
                                <div style="font-size: 12px;color: #736d6b;">{{ item.num }}</div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <!-- 歌单助手 -->
                <van-tab title='歌单助手' name="c">
                    <div class="tab">
                        <div class="top">
                            <div class="left_c">
                                <van-icon color="red" style="font-size: 30px;" name="play-circle" />
                                <div class="imc">
                                  <div style="font-weight: bold;">播放全部</div>
                                  <div style="font-size: 10px;">3首·大于5小时</div>
                                </div>
                            </div>
                            <div class="right">
                                <van-icon name="music-o" color="#736d6b" size="18" />
                                <van-icon name="bars" size="18" color="#736d6b" style="margin-left: 5px;" />
                            </div>
                        </div>
                        <div class="bottom" v-for="item in playList_c" :key="item.id">
                            <div class="left">
                                <img width="45px" height="45px" :src="item.url">
                            </div>
                            <div class="right_c">
                                <div style="font-weight: bold;">{{ item.name }}</div>
                            </div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>

          </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
const gridList = ref([
    {id:1,icon:"shop",text:'本地音乐'},
    {id:2,icon:"shop-collect",text:'云盘'},
    {id:3,icon:"goods-collect",text:'已购'},
    {id:4,icon:"play-circle",text:'最近播放'},
    {id:5,icon:"friends",text:'我的关注'},
    {id:6,icon:"star",text:'收藏和赞'},
    {id:7,icon:"volume",text:'我的播客'},
    {id:8,icon:"music",text:'音乐应用'},
])
//定义一个创建歌单的数组
const playList_a = ref([
    {id:1,url:"https://img2.baidu.com/it/u=2186774968,737002982&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422",name:'90后回忆录',num:'34首'},
    {id:2,url:"https://img1.baidu.com/it/u=3750423236,512659330&fm=253&app=138&f=JPEG?w=500&h=889",name:'车载音乐',num:'42首'},
    {id:3,url:"https://imge.kugou.com/stdmusic/20230303/20230303111702366422.jpg",name:'助眠神曲',num:'25首'}
]);
const playList_b = ref([
    {id:1,url:"https://img2.baidu.com/it/u=1605984409,4182349461&fm=253&app=120&f=JPEG?w=1422&h=800",name:'摇滚编年史',num:'35首'},
    {id:2,url:"https://img0.baidu.com/it/u=3989610333,986677012&fm=253&app=138&f=JPEG?w=800&h=800",name:'R&B歌曲',num:'66首'}
]);
const playList_c = ref([
    {id:1,url:"https://copyright.bdstatic.com/vcg/creative/ad8ba9868f20f3a4e15f1af29e8126ef.jpg",name:'Stars(卓沅)'},
    {id:2,url:"https://wx1.sinaimg.cn/mw690/006v1Xxpgy1hyp3vxghvtj33z45yo4qy.jpg",name:'我想你懂（王一珩）'},
    {id:3,url:"https://qcloud.dpfile.com/pc/aoWvcCnCwYZcvvs7_BjeBwwLtdlhcxeR8hgVLQF3PJKv-GHOx_pUinGa_Fy-bwpn.jpg",name:'印记（鹭卓）'}
]);
</script>
<style lang="less" scoped>
.mine_parent {
    height: calc(100vh - 32px);
    background-color: #f4f4f4;
    padding: 10px;

    // 头像样式
    .avatar {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .username {
            display: flex;
        }
    }

    // 宫格样式
    .grid{
        border-radius: 10px;
        overflow: hidden;
    }
    // 我喜欢的音乐样式
    .music{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        background-color: #fff;
        padding: 10px;
        border-radius: 10px;
        .icon{
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(160, 157, 157);
            border-radius: 5px;
            background-image: url(https://wx2.sinaimg.cn/mw690/005PQ2RCgy1i0k4jphw4pj30u20u0440.jpg);
            background-size: 100% 100%;

        }
    }
    // 收藏歌单
    .card{
        background-color: #fff;
        .tab{
            padding: 5px;
            .top{
                padding: 10px;
                display: flex;
                justify-content: space-between;
            }
            .bottom{
                padding: 10px;
                display: flex;
                .left{
                    margin-right: 10px;
                    img{
                        border-radius: 5px;
                    }
                }
            }
        }
    }
    // 歌单助手
    .left_c{
        display: flex;
        align-items: center;
        .imc{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 5px;
            flex-direction: column;
        }
    }
}
</style>